<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能模拟面试评测系统</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        :root {
            --primary-color: #4361ee;
            --secondary-color: #3f37c9;
            --accent-color: #4cc9f0;
            --light-color: #f8f9fa;
            --dark-color: #212529;
            --success-color: #4bb543;
            --warning-color: #f0ad4e;
            --danger-color: #d9534f;
            --gradient-start: #4361ee;
            --gradient-end: #3a0ca3;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f5f7fa;
            color: var(--dark-color);
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* 登录页面样式 */
        .auth-container {
            display: flex;
            min-height: 100vh;
            position: relative;
            overflow: hidden;
        }

        .auth-left {
            flex: 1;
            background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
            color: white;
            padding: 60px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
        }

        .auth-left::before {
            content: '';
            position: absolute;
            top: -50px;
            right: -50px;
            width: 200px;
            height: 200px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
        }

        .auth-left::after {
            content: '';
            position: absolute;
            bottom: -80px;
            left: -30px;
            width: 300px;
            height: 300px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
        }

        .auth-left h1 {
            font-size: 2.5rem;
            margin-bottom: 20px;
            position: relative;
            z-index: 1;
            font-weight: 700;
        }

        .auth-left p {
            font-size: 1.1rem;
            opacity: 0.9;
            margin-bottom: 30px;
            position: relative;
            z-index: 1;
            max-width: 80%;
        }

        .auth-left .features {
            margin-top: 40px;
            position: relative;
            z-index: 1;
        }

        .auth-left .feature-item {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        .auth-left .feature-icon {
            background-color: rgba(255, 255, 255, 0.2);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            flex-shrink: 0;
        }

        .auth-right {
            flex: 1;
            background-color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 60px;
            position: relative;
        }

        .auth-form {
            max-width: 400px;
            width: 100%;
            margin: 0 auto;
        }

        .auth-form h2 {
            font-size: 1.8rem;
            margin-bottom: 30px;
            color: var(--dark-color);
            font-weight: 600;
        }

        .form-group {
            margin-bottom: 20px;
            position: relative;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #555;
        }

        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 1rem;
            transition: all 0.3s;
            background-color: #f9f9f9;
        }

        .form-control:focus {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
            background-color: white;
        }

        .btn {
            display: inline-block;
            padding: 12px 24px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            text-align: center;
        }

        .btn:hover {
            background-color: var(--secondary-color);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .btn:active {
            transform: translateY(0);
        }

        .btn-block {
            display: block;
            width: 100%;
        }

        .auth-footer {
            margin-top: 20px;
            text-align: center;
            font-size: 0.9rem;
            color: #666;
        }

        .auth-footer a {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 500;
        }

        .auth-footer a:hover {
            text-decoration: underline;
        }

        /* 验证码样式 */
        .sms-code-container {
            display: flex;
            gap: 10px;
        }

        .sms-code-input {
            flex: 1;
        }

        .sms-code-btn {
            width: 120px;
            background-color: #f0f0f0;
            color: #666;
            border: 1px solid #ddd;
        }

        .sms-code-btn:hover {
            background-color: #e0e0e0;
            color: #333;
        }

        /* 错误提示 */
        .error-message {
            color: var(--danger-color);
            font-size: 0.8rem;
            margin-top: 5px;
            display: none;
        }

        /* 主界面样式 */
        .dashboard {
            display: flex;
            min-height: 100vh;
            background-color: #f5f7fa;
        }

        .sidebar {
            width: 260px;
            background-color: white;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
            padding: 30px 0;
            position: fixed;
            height: 100%;
            z-index: 100;
        }

        .sidebar-header {
            padding: 0 20px 30px;
            border-bottom: 1px solid #eee;
            margin-bottom: 20px;
        }

        .sidebar-header h2 {
            font-size: 1.3rem;
            color: var(--primary-color);
            display: flex;
            align-items: center;
            font-weight: 600;
        }

        .sidebar-header h2 i {
            margin-right: 10px;
            font-size: 1.2rem;
        }

        .sidebar-menu {
            list-style: none;
        }

        .sidebar-menu li a {
            display: flex;
            align-items: center;
            padding: 12px 20px;
            color: var(--dark-color);
            text-decoration: none;
            transition: all 0.3s;
            border-left: 3px solid transparent;
            font-weight: 500;
        }

        .sidebar-menu li a:hover,
        .sidebar-menu li a.active {
            background-color: rgba(67, 97, 238, 0.05);
            color: var(--primary-color);
            border-left: 3px solid var(--primary-color);
        }

        .sidebar-menu li a i {
            margin-right: 10px;
            width: 20px;
            text-align: center;
            font-size: 1.1rem;
        }

        .main-content {
            flex: 1;
            margin-left: 260px;
            padding: 30px;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .header h1 {
            font-size: 1.8rem;
            color: var(--dark-color);
            font-weight: 600;
        }

        .user-menu {
            display: flex;
            align-items: center;
        }

        .user-menu .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
        }

        .user-menu .avatar:hover {
            transform: scale(1.1);
        }

        .user-menu .name {
            margin-right: 15px;
            font-weight: 500;
        }

        .user-menu .settings-btn {
            color: #666;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 1.1rem;
        }

        .user-menu .settings-btn:hover {
            color: var(--primary-color);
            transform: rotate(30deg);
        }

        .card {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            padding: 25px;
            margin-bottom: 30px;
            transition: all 0.3s;
        }

        .card:hover {
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

        .card-header h2 {
            font-size: 1.3rem;
            color: var(--dark-color);
            font-weight: 600;
        }

        .card-header .btn {
            padding: 8px 16px;
            font-size: 0.9rem;
        }

        .interview-types {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
        }

        .interview-card {
            border: 1px solid #eee;
            border-radius: 8px;
            padding: 20px;
            transition: all 0.3s;
            background-color: white;
        }

        .interview-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        .interview-card h3 {
            font-size: 1.1rem;
            margin-bottom: 10px;
            color: var(--primary-color);
            font-weight: 600;
        }

        .interview-card p {
            color: #666;
            font-size: 0.9rem;
            margin-bottom: 15px;
            line-height: 1.5;
        }

        .interview-card .positions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 15px;
        }

        .interview-card .position-tag {
            background-color: rgba(67, 97, 238, 0.1);
            color: var(--primary-color);
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 500;
        }

        .interview-card .btn {
            width: 100%;
            margin-top: 10px;
        }

        .radar-chart-container {
            width: 100%;
            height: 400px;
            background-color: #f9f9f9;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #999;
        }

        .feedback-item {
            padding: 15px;
            border-left: 3px solid var(--primary-color);
            background-color: #f9f9f9;
            margin-bottom: 15px;
            border-radius: 0 4px 4px 0;
            transition: all 0.3s;
        }

        .feedback-item:hover {
            background-color: #f0f0f0;
        }

        .feedback-item h4 {
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            font-weight: 600;
        }

        .feedback-item .badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.8rem;
            margin-left: 10px;
            font-weight: 500;
        }

        .badge-success {
            background-color: rgba(75, 181, 67, 0.2);
            color: var(--success-color);
        }

        .badge-warning {
            background-color: rgba(240, 173, 78, 0.2);
            color: var(--warning-color);
        }

        .badge-danger {
            background-color: rgba(217, 83, 79, 0.2);
            color: var(--danger-color);
        }

        .resources-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
        }

        .resource-card {
            border: 1px solid #eee;
            border-radius: 8px;
            overflow: hidden;
            transition: all 0.3s;
            background-color: white;
        }

        .resource-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        .resource-thumbnail {
            height: 120px;
            background: linear-gradient(45deg, #f0f0f0, #e0e0e0);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 2rem;
        }

        .resource-body {
            padding: 15px;
        }

        .resource-body h4 {
            margin-bottom: 8px;
            font-weight: 600;
        }

        .resource-body p {
            color: #666;
            font-size: 0.9rem;
            margin-bottom: 10px;
            line-height: 1.5;
        }

        .resource-tag {
            display: inline-block;
            background-color: rgba(67, 97, 238, 0.1);
            color: var(--primary-color);
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.8rem;
            margin-right: 5px;
            margin-bottom: 5px;
            font-weight: 500;
        }

        /* 面试界面样式 */
        .interview-container {
            display: flex;
            flex-direction: column;
            height: calc(100vh - 60px);
            background-color: #f5f7fa;
        }

        .interview-header {
            padding: 20px;
            background-color: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            z-index: 10;
            border-radius: 10px 10px 0 0;
        }

        .interview-header h2 {
            font-size: 1.3rem;
            color: var(--primary-color);
            font-weight: 600;
        }

        .interview-main {
            display: flex;
            flex: 1;
            overflow: hidden;
            border-radius: 0 0 10px 10px;
        }

        .video-container {
            flex: 1;
            background-color: #f0f0f0;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        .user-video {
            flex: 1;
            background-color: #333;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            position: relative;
        }

        .video-controls {
            padding: 15px;
            background-color: white;
            display: flex;
            justify-content: center;
            gap: 20px;
            border-top: 1px solid #eee;
        }

        .control-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
            border: none;
        }

        .control-btn:hover {
            background-color: var(--secondary-color);
            transform: scale(1.05);
        }

        .control-btn.end {
            background-color: var(--danger-color);
        }

        .control-btn.end:hover {
            background-color: #c9302c;
        }

        .interview-sidebar {
            width: 350px;
            background-color: white;
            border-left: 1px solid #eee;
            overflow-y: auto;
            padding: 20px;
        }

        .question-item {
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 8px;
            background-color: #f9f9f9;
            transition: all 0.3s;
            cursor: pointer;
        }

        .question-item:hover {
            background-color: #f0f0f0;
        }

        .question-item.current {
            border-left: 3px solid var(--primary-color);
            background-color: rgba(67, 97, 238, 0.05);
        }

        .question-item h4 {
            margin-bottom: 10px;
            font-weight: 600;
        }

        .question-item p {
            color: #666;
            font-size: 0.9rem;
            line-height: 1.5;
        }

        .timer {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            margin-bottom: 20px;
            padding: 10px;
            background-color: #f5f5f5;
            border-radius: 5px;
            font-weight: 500;
            color: var(--dark-color);
        }

        .timer i {
            margin-right: 10px;
            color: var(--primary-color);
        }

        /* 加载动画 */
        .loading-spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
            margin-right: 8px;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        /* 响应式设计 */
        @media (max-width: 992px) {
            .auth-container {
                flex-direction: column;
            }

            .auth-left,
            .auth-right {
                padding: 40px 20px;
            }

            .auth-left {
                text-align: center;
            }

            .auth-left p {
                max-width: 100%;
                margin-left: auto;
                margin-right: auto;
            }

            .features {
                justify-content: center;
            }

            .interview-main {
                flex-direction: column;
            }

            .interview-sidebar {
                width: 100%;
                height: 300px;
            }
        }

        @media (max-width: 768px) {
            .sidebar {
                width: 70px;
                padding: 20px 0;
            }

            .sidebar-header h2 span,
            .sidebar-menu li a span {
                display: none;
            }

            .sidebar-menu li a {
                justify-content: center;
                padding: 12px 0;
            }

            .sidebar-menu li a i {
                margin-right: 0;
                font-size: 1.2rem;
            }

            .main-content {
                margin-left: 70px;
            }

            .user-menu .name {
                display: none;
            }

            .interview-types {
                grid-template-columns: 1fr;
            }

            .resources-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>

<body>
    <!-- 登录页面 -->
    <div class="auth-container" id="loginPage">
        <div class="auth-left">
            <h1>智能模拟面试评测系统</h1>
            <p>通过AI技术帮助您提升面试表现，获得专业的反馈和建议，为真实面试做好充分准备。</p>

            <div class="features">
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fas fa-comment-alt"></i>
                    </div>
                    <span>多模态数据分析（语音、视频、文本）</span>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fas fa-chart-radar"></i>
                    </div>
                    <span>5项核心能力指标评测</span>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fas fa-road"></i>
                    </div>
                    <span>个性化学习路径推荐</span>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fas fa-briefcase"></i>
                    </div>
                    <span>覆盖多个技术领域和岗位</span>
                </div>
            </div>
        </div>
        <div class="auth-right">
            <div class="auth-form">
                <h2>用户登录</h2>
                <form id="loginForm">
                    <div class="form-group">
                        <label for="phone">手机号码</label>
                        <input type="tel" id="phone" class="form-control" placeholder="请输入手机号码" required>
                        <div class="error-message" id="phoneError">请输入有效的手机号码</div>
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" id="password" class="form-control" placeholder="请输入密码" required>
                        <div class="error-message" id="passwordError">请输入密码</div>
                    </div>
                    <div class="form-group">
                        <div class="sms-code-container">
                            <input type="text" id="smsCode" class="form-control sms-code-input" placeholder="请输入验证码">
                            <button type="button" class="btn sms-code-btn" id="sendSmsBtn">
                                <span id="smsBtnText">获取验证码</span>
                                <span class="loading-spinner" id="smsLoading" style="display: none;"></span>
                            </button>
                        </div>
                        <div class="error-message" id="smsCodeError">请输入验证码</div>
                    </div>
                    <button type="submit" class="btn btn-block">登录</button>
                </form>
                <div class="auth-footer">
                    <p>还没有账号？<a href="#" id="showRegister">立即注册</a></p>
                </div>
            </div>
        </div>
    </div>

    <!-- 注册页面 (隐藏) -->
    <div class="auth-container" id="registerPage" style="display: none;">
        <div class="auth-left">
            <h1>加入智能模拟面试评测系统</h1>
            <p>注册账号，开始您的面试提升之旅，获得专业的AI反馈和建议。</p>
        </div>
        <div class="auth-right">
            <div class="auth-form">
                <h2>用户注册</h2>
                <form id="registerForm">
                    <div class="form-group">
                        <label for="regPhone">手机号码</label>
                        <input type="tel" id="regPhone" class="form-control" placeholder="请输入手机号码" required>
                        <div class="error-message" id="regPhoneError">请输入有效的手机号码</div>
                    </div>
                    <div class="form-group">
                        <label for="regUsername">用户名</label>
                        <input type="text" id="regUsername" class="form-control" placeholder="请输入用户名" required>
                        <div class="error-message" id="regUsernameError">请输入用户名</div>
                    </div>
                    <div class="form-group">
                        <label for="regPassword">密码</label>
                        <input type="password" id="regPassword" class="form-control" placeholder="请输入密码" required>
                        <div class="error-message" id="regPasswordError">密码长度需在6-20位之间</div>
                    </div>
                    <div class="form-group">
                        <label for="regConfirmPassword">确认密码</label>
                        <input type="password" id="regConfirmPassword" class="form-control" placeholder="请再次输入密码"
                            required>
                        <div class="error-message" id="regConfirmPasswordError">两次输入的密码不一致</div>
                    </div>
                    <button type="submit" class="btn btn-block">注册</button>
                </form>
                <div class="auth-footer">
                    <p>已有账号？<a href="#" id="showLogin">立即登录</a></p>
                </div>
            </div>
        </div>
    </div>

    <!-- 主界面 (隐藏) -->
    <div class="dashboard" id="dashboard" style="display: none;">
        <div class="sidebar">
            <div class="sidebar-header">
                <h2><i class="fas fa-robot"></i> <span>模拟面试系统</span></h2>
            </div>
            <ul class="sidebar-menu">
                <li><a href="#" class="active" id="menuDashboard"><i class="fas fa-home"></i> <span>首页</span></a></li>
                <li><a href="#" id="menuInterview"><i class="fas fa-video"></i> <span>开始面试</span></a></li>
                <li><a href="#" id="menuHistory"><i class="fas fa-history"></i> <span>历史记录</span></a></li>
                <li><a href="#" id="menuFeedback"><i class="fas fa-chart-radar"></i> <span>能力分析</span></a></li>
                <li><a href="#" id="menuResources"><i class="fas fa-book"></i> <span>学习资源</span></a></li>
                <li><a href="#" id="menuProfile"><i class="fas fa-user"></i> <span>个人资料</span></a></li>
            </ul>
        </div>
        <div class="main-content">
            <div class="header">
                <h1>欢迎回来，<span id="userGreeting">用户</span></h1>
                <div class="user-menu">
                    <span class="name">用户</span>
                    <div class="avatar">用</div>
                    <i class="fas fa-cog settings-btn"></i>
                </div>
            </div>

            <!-- 首页内容 -->
            <div id="dashboardContent">
                <div class="card">
                    <div class="card-header">
                        <h2>推荐面试类型</h2>
                        <a href="#" class="btn" id="viewAllInterviews">查看全部</a>
                    </div>
                    <div class="interview-types">
                        <div class="interview-card">
                            <h3>面试类型1</h3>
                            <p>此面试类型将评估您的相关技能和能力。</p>
                            <div class="positions">
                                <span class="position-tag">相关职位1</span>
                                <span class="position-tag">相关职位2</span>
                            </div>
                            <button class="btn start-interview-btn" data-type="tech"
                                data-position="frontend">开始面试</button>
                        </div>
                        <div class="interview-card">
                            <h3>面试类型2</h3>
                            <p>此面试类型将评估您的相关技能和能力。</p>
                            <div class="positions">
                                <span class="position-tag">相关职位1</span>
                                <span class="position-tag">相关职位2</span>
                            </div>
                            <button class="btn start-interview-btn" data-type="tech"
                                data-position="frontend">开始面试</button>
                        </div>
                        <div class="interview-card">
                            <h3>面试类型3</h3>
                            <p>此面试类型将评估您的相关技能和能力。</p>
                            <div class="positions">
                                <span class="position-tag">相关职位1</span>
                                <span class="position-tag">相关职位2</span>
                            </div>
                            <button class="btn start-interview-btn" data-type="tech"
                                data-position="frontend">开始面试</button>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <h2>最近一次面试结果</h2>
                    </div>
                    <div class="radar-chart-container">
                        <p>雷达图将在此处显示</p>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <h2>关键反馈点</h2>
                    </div>
                    <div class="feedback-item">
                        <h4>反馈项1 <span class="badge badge-warning">需要改进</span></h4>
                        <p>这里是具体的反馈内容和建议。</p>
                    </div>
                    <div class="feedback-item">
                        <h4>反馈项2 <span class="badge badge-success">优秀</span></h4>
                        <p>这里是具体的反馈内容和建议。</p>
                    </div>
                    <div class="feedback-item">
                        <h4>反馈项3 <span class="badge badge-danger">不足</span></h4>
                        <p>这里是具体的反馈内容和建议。</p>
                    </div>
                </div>
            </div>

            <!-- 面试内容 (隐藏) -->
            <div id="interviewContent" style="display: none;">
                <div class="interview-container">
                    <div class="interview-header">
                        <h2>模拟面试</h2>
                    </div>
                    <div class="interview-main">
                        <div class="video-container">
                            <div class="user-video">
                                <video id="userVideo" autoplay muted playsinline
                                    style="width: 100%; height: auto; background: black;"></video>
                            </div>
                            <div class="video-controls">
                                <div class="control-btn">
                                    <i class="fas fa-microphone"></i>
                                </div>
                                <div class="control-btn">
                                    <i class="fas fa-video"></i>
                                </div>
                                <div class="control-btn end">
                                    <i class="fas fa-phone-slash"></i>
                                </div>
                            </div>
                        </div>
                        <div class="interview-sidebar">
                            <div class="timer">
                                <i class="fas fa-clock"></i>
                                <span>00:00:00</span>
                            </div>
                            <div class="question-item current">
                                <h4>问题 1</h4>
                                <p>这里是第一个面试问题内容。</p>
                            </div>
                            <div class="question-item">
                                <h4>问题 2</h4>
                                <p>这里是第二个面试问题内容。</p>
                            </div>
                            <div class="question-item">
                                <h4>问题 3</h4>
                                <p>这里是第三个面试问题内容。</p>
                            </div>
                            <div class="question-item">
                                <h4>问题 4</h4>
                                <p>这里是第四个面试问题内容。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 能力分析内容 (隐藏) -->
            <div id="feedbackContent" style="display: none;">
                <div class="card">
                    <div class="card-header">
                        <h2>能力分析报告</h2>
                    </div>
                    <div class="radar-chart-container">
                        <p>能力分析雷达图将在此处显示</p>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <h2>详细反馈</h2>
                    </div>
                    <div class="feedback-item">
                        <h4>能力项1 <span class="badge badge-success">8.5/10</span></h4>
                        <p>这里是关于此项能力的详细反馈内容。</p>
                        <p><strong>建议：</strong> 这里是改进建议。</p>
                    </div>
                    <div class="feedback-item">
                        <h4>能力项2 <span class="badge badge-warning">6.2/10</span></h4>
                        <p>这里是关于此项能力的详细反馈内容。</p>
                        <p><strong>建议：</strong> 这里是改进建议。</p>
                    </div>
                    <div class="feedback-item">
                        <h4>能力项3 <span class="badge badge-success">7.8/10</span></h4>
                        <p>这里是关于此项能力的详细反馈内容。</p>
                        <p><strong>建议：</strong> 这里是改进建议。</p>
                    </div>
                    <div class="feedback-item">
                        <h4>能力项4 <span class="badge badge-warning">6.5/10</span></h4>
                        <p>这里是关于此项能力的详细反馈内容。</p>
                        <p><strong>建议：</strong> 这里是改进建议。</p>
                    </div>
                    <div class="feedback-item">
                        <h4>能力项5 <span class="badge badge-danger">5.0/10</span></h4>
                        <p>这里是关于此项能力的详细反馈内容。</p>
                        <p><strong>建议：</strong> 这里是改进建议。</p>
                    </div>
                </div>
            </div>

            <!-- 学习资源内容 (隐藏) -->
            <div id="resourcesContent" style="display: none;">
                <div class="card">
                    <div class="card-header">
                        <h2>个性化学习资源推荐</h2>
                    </div>
                    <div class="resources-grid">
                        <div class="resource-card">
                            <div class="resource-thumbnail">
                                <i class="fas fa-video"></i>
                            </div>
                            <div class="resource-body">
                                <h4>资源标题1</h4>
                                <p>这里是资源的简要描述。</p>
                                <div>
                                    <span class="resource-tag">类别1</span>
                                    <span class="resource-tag">类型1</span>
                                </div>
                            </div>
                        </div>
                        <div class="resource-card">
                            <div class="resource-thumbnail">
                                <i class="fas fa-file-alt"></i>
                            </div>
                            <div class="resource-body">
                                <h4>资源标题2</h4>
                                <p>这里是资源的简要描述。</p>
                                <div>
                                    <span class="resource-tag">类别2</span>
                                    <span class="resource-tag">类型2</span>
                                </div>
                            </div>
                        </div>
                        <div class="resource-card">
                            <div class="resource-thumbnail">
                                <i class="fas fa-headset"></i>
                            </div>
                            <div class="resource-body">
                                <h4>资源标题3</h4>
                                <p>这里是资源的简要描述。</p>
                                <div>
                                    <span class="resource-tag">类别3</span>
                                    <span class="resource-tag">类型3</span>
                                </div>
                            </div>
                        </div>
                        <div class="resource-card">
                            <div class="resource-thumbnail">
                                <i class="fas fa-chalkboard-teacher"></i>
                            </div>
                            <div class="resource-body">
                                <h4>资源标题4</h4>
                                <p>这里是资源的简要描述。</p>
                                <div>
                                    <span class="resource-tag">类别4</span>
                                    <span class="resource-tag">类型4</span>
                                </div>
                            </div>
                        </div>
                        <div class="resource-card">
                            <div class="resource-thumbnail">
                                <i class="fas fa-book"></i>
                            </div>
                            <div class="resource-body">
                                <h4>资源标题5</h4>
                                <p>这里是资源的简要描述。</p>
                                <div>
                                    <span class="resource-tag">类别5</span>
                                    <span class="resource-tag">类型5</span>
                                </div>
                            </div>
                        </div>
                        <div class="resource-card">
                            <div class="resource-thumbnail">
                                <i class="fas fa-laptop-code"></i>
                            </div>
                            <div class="resource-body">
                                <h4>资源标题6</h4>
                                <p>这里是资源的简要描述。</p>
                                <div>
                                    <span class="resource-tag">类别6</span>
                                    <span class="resource-tag">类型6</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // ===== 全局变量 =====
        let mediaStream = null;
        let mediaRecorder = null;
        let recordedChunks = [];
        let currentInterviewId = null;
        let timerInterval = null;  // 确保在这里声明
        let interviewSeconds = 0;  // 新增计时用变量

        // 简单的页面切换逻辑
        document.getElementById('showRegister').addEventListener('click', function (e) {
            e.preventDefault();
            document.getElementById('loginPage').style.display = 'none';
            document.getElementById('registerPage').style.display = 'flex';
        });

        document.getElementById('showLogin').addEventListener('click', function (e) {
            e.preventDefault();
            document.getElementById('registerPage').style.display = 'none';
            document.getElementById('loginPage').style.display = 'flex';
        });

        // 手机号验证函数
        function validatePhone(phone) {
            const regex = /^1[3-9]\d{9}$/;
            return regex.test(phone);
        }

        // 密码验证函数
        function validatePassword(password) {
            return password.length >= 6 && password.length <= 20;
        }

        // 获取JWT Token
        function getAuthToken() {
            return localStorage.getItem('authToken');
        }

        // 获取当前用户ID
        function getCurrentUserId() {
            const user = JSON.parse(localStorage.getItem('currentUser'));
            return user ? user.id : null;
        }

        // 登录表单验证
        document.getElementById('loginForm').addEventListener('submit', function (e) {
            e.preventDefault();

            const phone = document.getElementById('phone').value;
            const password = document.getElementById('password').value;

            let isValid = true;

            // 验证手机号
            if (!validatePhone(phone)) {
                document.getElementById('phoneError').style.display = 'block';
                isValid = false;
            } else {
                document.getElementById('phoneError').style.display = 'none';
            }

            // 验证密码
            if (password.trim() === '') {
                document.getElementById('passwordError').style.display = 'block';
                isValid = false;
            } else {
                document.getElementById('passwordError').style.display = 'none';
            }

            if (isValid) {
                // 调用后端登录接口
                fetch('/api/auth/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ phone, password })
                })
                    .then(res => {
                        if (!res.ok) {
                            throw new Error('登录失败');
                        }
                        return res.json();
                    })
                    .then(data => {
                        if (data.access_token) {
                            // 登录成功，存储 JWT token
                            localStorage.setItem('authToken', data.access_token);
                            localStorage.setItem('currentUser', JSON.stringify(data.user));

                            // 更新UI
                            document.getElementById('loginPage').style.display = 'none';
                            document.getElementById('dashboard').style.display = 'flex';
                            document.getElementById('userGreeting').textContent = data.user.username;
                            document.querySelector('.user-menu .name').textContent = data.user.username;
                            document.querySelector('.user-menu .avatar').textContent = data.user.username.charAt(0);

                            // 加载用户数据
                            loadDashboardData();
                        } else {
                            alert('登录失败：' + (data.message || '未知错误'));
                        }
                    })
                    .catch(err => {
                        alert('登录失败，请检查网络或服务器');
                        console.error(err);
                    });
            }
        });

        // 注册表单验证
        document.getElementById('registerForm').addEventListener('submit', function (e) {
            e.preventDefault();

            const phone = document.getElementById('regPhone').value;
            const username = document.getElementById('regUsername').value;
            const password = document.getElementById('regPassword').value;
            const confirmPassword = document.getElementById('regConfirmPassword').value;

            let isValid = true;

            // 验证手机号
            if (!validatePhone(phone)) {
                document.getElementById('regPhoneError').style.display = 'block';
                isValid = false;
            } else {
                document.getElementById('regPhoneError').style.display = 'none';
            }

            // 验证用户名
            if (username.trim() === '') {
                document.getElementById('regUsernameError').style.display = 'block';
                isValid = false;
            } else {
                document.getElementById('regUsernameError').style.display = 'none';
            }

            // 验证密码
            if (!validatePassword(password)) {
                document.getElementById('regPasswordError').style.display = 'block';
                isValid = false;
            } else {
                document.getElementById('regPasswordError').style.display = 'none';
            }

            // 验证确认密码
            if (password !== confirmPassword) {
                document.getElementById('regConfirmPasswordError').style.display = 'block';
                isValid = false;
            } else {
                document.getElementById('regConfirmPasswordError').style.display = 'none';
            }

            if (isValid) {
                // 调用后端注册接口
                fetch('/api/auth/register', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ phone, username, password })
                })
                    .then(res => {
                        if (res.status === 201) {
                            return res.json();
                        }
                        throw new Error('注册失败');
                    })
                    .then(data => {
                        alert('注册成功，请登录');
                        document.getElementById('registerPage').style.display = 'none';
                        document.getElementById('loginPage').style.display = 'flex';
                    })
                    .catch(err => {
                        alert('注册失败，请检查网络或服务器');
                        console.error(err);
                    });
            }
        });

        // 发送验证码
        document.getElementById('sendSmsBtn').addEventListener('click', function () {
            const phone = document.getElementById('phone').value;

            if (!validatePhone(phone)) {
                document.getElementById('phoneError').style.display = 'block';
                return;
            }

            // 显示加载状态
            document.getElementById('smsBtnText').style.display = 'none';
            document.getElementById('smsLoading').style.display = 'inline-block';
            this.disabled = true;

            // 模拟发送验证码
            setTimeout(() => {
                document.getElementById('smsLoading').style.display = 'none';
                document.getElementById('smsBtnText').textContent = '60秒后重试';
                document.getElementById('smsBtnText').style.display = 'inline-block';

                let countdown = 60;
                const timer = setInterval(() => {
                    countdown--;
                    document.getElementById('smsBtnText').textContent = `${countdown}秒后重试`;

                    if (countdown <= 0) {
                        clearInterval(timer);
                        document.getElementById('sendSmsBtn').disabled = false;
                        document.getElementById('smsBtnText').textContent = '获取验证码';
                    }
                }, 1000);
            }, 1000);
        });

        // 加载仪表盘数据
        async function loadDashboardData() {
            const token = localStorage.getItem('authToken');

            if (!token) {
                console.log('用户未登录');
                // Redirect to login or show login modal
                return;
            }

            try {
                // 获取面试历史
                const historyResponse = await fetch('/api/interview/history', {
                    headers: {
                        'Authorization': `Bearer ${token}`  // Add this header
                    }
                });

                if (historyResponse.status === 401) {
                    // Token expired or invalid
                    localStorage.removeItem('authToken');
                    alert('登录已过期，请重新登录');
                    window.location.reload();
                    return;
                }

                if (!historyResponse.ok) {
                    throw new Error('获取面试历史失败');
                }

                const interviews = await historyResponse.json();
                console.log('面试历史:', interviews);

                // Rest of your code...
            } catch (err) {
                console.error('加载数据失败:', err);
                if (err.message.includes('401')) {
                    alert('身份验证过期，请重新登录');
                    // Redirect to login page
                    document.getElementById('loginPage').style.display = 'flex';
                    document.getElementById('dashboard').style.display = 'none';
                }
            }
        }
        // 开始面试
        function startInterview(interviewType, position) {
            const token = getAuthToken();

            if (!token) {
                alert('请先登录');
                return;
            }

            // 显示加载状态
            const startBtn = event?.target;
            if (startBtn) {
                startBtn.disabled = true;
                startBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 准备中...';
            }

            fetch('/api/interview/start', {
                method: 'POST',
                headers: {
                    'Authorization': `Bearer ${token}`,
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    interview_type: interviewType,
                    position: position
                })
            })
                .then(res => res.json())
                .then(async data => {
                    currentInterviewId = data.interview_id;

                    // 跳转到面试页面
                    document.getElementById('dashboardContent').style.display = 'none';
                    document.getElementById('interviewContent').style.display = 'block';

                    try {
                        // 初始化媒体设备
                        await initMediaDevices();
                        // 初始化录制器
                        initMediaRecorder();
                        // 启动计时器
                        startTimer();
                        // 加载面试问题
                        loadInterviewQuestions(data.interview_id);
                    } catch (err) {
                        console.error('面试初始化失败:', err);
                        handleEndInterview(); // 出错时清理资源
                    }
                })
                .catch(err => {
                    console.error('开始面试失败:', err);
                    alert('开始面试失败: ' + err.message);
                })
                .finally(() => {
                    if (startBtn) {
                        startBtn.disabled = false;
                        startBtn.textContent = '开始面试';
                    }
                });
        }

        // 加载面试问题
        function loadInterviewQuestions(interviewId) {
            const token = getAuthToken();

            fetch(`/api/interview/${interviewId}/questions`, {
                headers: {
                    'Authorization': `Bearer ${token}`
                }
            })
                .then(res => res.json())
                .then(questions => {
                    // 更新UI显示面试问题
                    console.log('面试问题:', questions);
                })
                .catch(err => console.error('获取面试问题失败:', err));
        }

        // 结束面试
        function endInterview(interviewId) {
            const token = getAuthToken();

            fetch(`/api/interview/${interviewId}/end`, {
                method: 'POST',
                headers: {
                    'Authorization': `Bearer ${token}`
                }
            })
                .then(res => res.json())
                .then(data => {
                    // 返回仪表盘
                    document.getElementById('interviewContent').style.display = 'none';
                    document.getElementById('dashboardContent').style.display = 'block';

                    // 重新加载数据
                    loadDashboardData();
                })
                .catch(err => console.error('结束面试失败:', err));
        }

        // 获取面试分析结果
        function getInterviewAnalysis(interviewId) {
            const token = getAuthToken();

            fetch(`/api/analysis/${interviewId}/result`, {
                headers: {
                    'Authorization': `Bearer ${token}`
                }
            })
                .then(res => res.json())
                .then(analysis => {
                    // 更新UI显示分析结果
                    console.log('面试分析:', analysis);
                })
                .catch(err => console.error('获取面试分析失败:', err));
        }

        // 获取雷达图数据
        function getRadarData(interviewId) {
            const token = getAuthToken();

            fetch(`/api/analysis/${interviewId}/radar`, {
                headers: {
                    'Authorization': `Bearer ${token}`
                }
            })
                .then(res => res.json())
                .then(data => {
                    // 更新雷达图
                    console.log('雷达图数据:', data);
                })
                .catch(err => console.error('获取雷达图数据失败:', err));
        }

        // 侧边栏菜单切换
        const menuItems = ['Dashboard', 'Interview', 'History', 'Feedback', 'Resources', 'Profile'];
        menuItems.forEach(item => {
            document.getElementById(`menu${item}`).addEventListener('click', function (e) {
                e.preventDefault();

                // 更新活动菜单项样式
                document.querySelectorAll('.sidebar-menu li a').forEach(link => {
                    link.classList.remove('active');
                });
                this.classList.add('active');

                // 隐藏所有内容区域
                document.getElementById('dashboardContent').style.display = 'none';
                document.getElementById('interviewContent').style.display = 'none';
                document.getElementById('feedbackContent').style.display = 'none';
                document.getElementById('resourcesContent').style.display = 'none';

                // 显示选中的内容区域
                if (item === 'Dashboard') {
                    document.getElementById('dashboardContent').style.display = 'block';
                    loadDashboardData();
                } else if (item === 'Interview') {
                    document.getElementById('interviewContent').style.display = 'block';
                } else if (item === 'Feedback') {
                    document.getElementById('feedbackContent').style.display = 'block';
                } else if (item === 'Resources') {
                    document.getElementById('resourcesContent').style.display = 'block';
                    loadResources();
                }
            });
        });

        // 加载资源
        function loadResources() {
            const token = getAuthToken();

            fetch('/api/resources/', {
                headers: {
                    'Authorization': `Bearer ${token}`
                }
            })
                .then(res => res.json())
                .then(resources => {
                    // 更新UI显示资源
                    console.log('学习资源:', resources);
                })
                .catch(err => console.error('获取资源失败:', err));
        }

        // 面试卡片点击事件
        // ===== 新增：面试卡片点击事件 =====
        document.querySelectorAll('.start-interview-btn').forEach(btn => {
            btn.addEventListener('click', async function () {
                // 获取面试类型和职位
                const interviewType = this.getAttribute('data-type');
                const position = this.getAttribute('data-position');

                // 显示加载状态
                this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 准备中...';
                this.disabled = true;

                try {
                    // 1. 初始化摄像头和麦克风
                    const mediaSuccess = await initMediaDevices();
                    if (!mediaSuccess) throw new Error('无法访问摄像头/麦克风');

                    // 2. 开始面试流程
                    await startInterview(interviewType, position);

                } catch (err) {
                    console.error("面试启动失败:", err);
                    alert("启动面试失败: " + err.message);

                    // 恢复按钮状态
                    this.disabled = false;
                    this.textContent = '开始面试';
                }
            });
        });

        // 输入框实时验证
        document.getElementById('phone').addEventListener('input', function () {
            if (validatePhone(this.value)) {
                document.getElementById('phoneError').style.display = 'none';
            }
        });

        document.getElementById('regPhone').addEventListener('input', function () {
            if (validatePhone(this.value)) {
                document.getElementById('regPhoneError').style.display = 'none';
            }
        });

        document.getElementById('regPassword').addEventListener('input', function () {
            if (validatePassword(this.value)) {
                document.getElementById('regPasswordError').style.display = 'none';
            }
        });

        document.getElementById('regConfirmPassword').addEventListener('input', function () {
            const password = document.getElementById('regPassword').value;
            if (this.value === password) {
                document.getElementById('regConfirmPasswordError').style.display = 'none';
            }
        });

        // 初始化检查登录状态
        function checkAuthState() {
            const token = getAuthToken();
            if (token) {
                document.getElementById('loginPage').style.display = 'none';
                document.getElementById('dashboard').style.display = 'flex';
                loadDashboardData();
            }
        }

        // 页面加载时检查登录状态
        window.addEventListener('DOMContentLoaded', checkAuthState);
        // 在之前的代码基础上，添加以下内容



        // 获取DOM元素
        const micBtn = document.querySelector('.video-controls .fa-microphone').closest('.control-btn');
        const videoBtn = document.querySelector('.video-controls .fa-video').closest('.control-btn');
        const endBtn = document.querySelector('.video-controls .fa-phone-slash').closest('.control-btn');
        const userVideo = document.querySelector('.user-video');

        // 初始化媒体设备

        async function initMediaDevices() {
            const videoElement = document.getElementById('userVideo');

            try {
                // 1. 检查浏览器支持
                if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
                    throw new Error('您的浏览器不支持媒体设备访问');
                }

                // 2. 停止现有的媒体流
                if (mediaStream) {
                    mediaStream.getTracks().forEach(track => track.stop());
                }

                // 3. 请求媒体权限
                mediaStream = await navigator.mediaDevices.getUserMedia({
                    audio: true,
                    video: {
                        width: { ideal: 1280 },
                        height: { ideal: 720 },
                        facingMode: "user"
                    }
                });

                // 4. 正确处理视频元素
                videoElement.srcObject = mediaStream;

                // 5. 确保视频能播放
                try {
                    await videoElement.play();
                } catch (playErr) {
                    console.error('视频播放失败:', playErr);
                    videoElement.muted = true;
                    await videoElement.play();
                }

                return true;
            } catch (err) {
                console.error('媒体初始化失败:', err);
                alert(`无法访问媒体设备: ${err.message}`);
                return false;
            }
        }

        // 初始化媒体录制器
        function initMediaRecorder() {
            try {
                recordedChunks = [];

                // 检查浏览器是否支持MediaRecorder
                if (!window.MediaRecorder) {
                    throw new Error('您的浏览器不支持媒体录制功能');
                }

                // 获取支持的mime类型
                const options = { mimeType: 'video/webm;codecs=vp9' };
                if (!MediaRecorder.isTypeSupported(options.mimeType)) {
                    options.mimeType = 'video/webm;codecs=vp8';
                    if (!MediaRecorder.isTypeSupported(options.mimeType)) {
                        options.mimeType = 'video/webm';
                        if (!MediaRecorder.isTypeSupported(options.mimeType)) {
                            options.mimeType = '';
                        }
                    }
                }

                mediaRecorder = new MediaRecorder(mediaStream, options);

                mediaRecorder.ondataavailable = function (e) {
                    if (e.data.size > 0) {
                        recordedChunks.push(e.data);
                    }
                };

                mediaRecorder.onstop = function () {
                    saveRecording();
                };

                // 开始录制
                mediaRecorder.start(1000); // 每1秒收集一次数据

            } catch (err) {
                console.error('初始化录制器失败:', err);
                alert('录制功能不可用: ' + err.message);
            }
        }

        // 保存录制内容
        async function saveRecording() {
            if (!currentInterviewId || recordedChunks.length === 0) return;

            try {
                const blob = new Blob(recordedChunks, { type: 'video/webm' });
                const formData = new FormData();
                formData.append('file', blob, 'interview.webm');
                formData.append('data_type', 'video');

                const token = localStorage.getItem('authToken');
                if (!token) return;

                const response = await fetch(`/api/interview/${currentInterviewId}/upload`, {
                    method: 'POST',
                    headers: {
                        'Authorization': `Bearer ${token}`
                    },
                    body: formData
                });

                if (!response.ok) {
                    throw new Error('上传录制内容失败');
                }

                console.log('录制内容已保存');

            } catch (err) {
                console.error('保存录制内容失败:', err);
            } finally {
                recordedChunks = [];
            }
        }

        // 开始面试 (修改后的版本)
        async function startInterview(interviewType, position) {
            const token = localStorage.getItem('authToken');

            if (!token) {
                alert('请先登录');
                return;
            }

            try {
                // 1. 调用开始面试API
                const response = await fetch('/api/interview/start', {
                    method: 'POST',
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        interview_type: interviewType,
                        position: position
                    })
                });

                if (!response.ok) {
                    throw new Error('开始面试请求失败');
                }

                const data = await response.json();
                currentInterviewId = data.id;

                // 2. 跳转到面试页面
                document.getElementById('dashboardContent').style.display = 'none';
                document.getElementById('interviewContent').style.display = 'block';

                // 3. 初始化媒体设备
                const mediaSuccess = await initMediaDevices();
                if (!mediaSuccess) {
                    throw new Error('媒体设备初始化失败');
                }

                // 4. 初始化录制器
                initMediaRecorder();

                // 5. 开始计时器
                startTimer();

                // 6. 加载面试问题
                await loadInterviewQuestions(data.id);

            } catch (err) {
                console.error('开始面试失败:', err);
                alert('开始面试失败: ' + err.message);

                // 返回仪表盘
                document.getElementById('dashboardContent').style.display = 'block';
                document.getElementById('interviewContent').style.display = 'none';
            }
        }


        // 计时器功能
        // ===== 计时器相关函数 =====
        function startTimer() {
            // 清除现有计时器
            if (timerInterval) clearInterval(timerInterval);

            // 重置时间
            interviewSeconds = 0;
            updateTimerDisplay();

            // 启动新计时器
            timerInterval = setInterval(() => {
                interviewSeconds++;
                updateTimerDisplay();
            }, 1000);
        }


        function updateTimerDisplay() {
            const timerElement = document.querySelector('.timer span');
            if (!timerElement) return;

            const hours = Math.floor(interviewSeconds / 3600);
            const minutes = Math.floor((interviewSeconds % 3600) / 60);
            const secs = interviewSeconds % 60;

            timerElement.textContent =
                `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
        }

        function stopTimer() {
            if (timerInterval) {
                clearInterval(timerInterval);
                timerInterval = null;
            }
        }
        // 结束面试处理
        async function handleEndInterview() {
            try {
                // 1. 停止录制
                if (mediaRecorder && mediaRecorder.state !== 'inactive') {
                    mediaRecorder.stop();
                }

                // 2. 关闭媒体流
                if (mediaStream) {
                    mediaStream.getTracks().forEach(track => track.stop());
                    mediaStream = null;
                }

                // 3. 停止计时器
                stopTimer();

                // 4. 如果有进行中的面试，调用结束API
                if (currentInterviewId) {
                    const token = localStorage.getItem('authToken');
                    if (token) {
                        await fetch(`/api/interview/${currentInterviewId}/end`, {
                            method: 'POST',
                            headers: {
                                'Authorization': `Bearer ${token}`
                            }
                        });
                    }
                    currentInterviewId = null;
                }

                // 5. 返回仪表盘
                document.getElementById('interviewContent').style.display = 'none';
                document.getElementById('dashboardContent').style.display = 'block';

                // 6. 刷新数据
                loadDashboardData();

            } catch (err) {
                console.error('结束面试失败:', err);
                alert('结束面试时出错: ' + err.message);
            }
        }

        // 添加按钮事件监听
        micBtn.addEventListener('click', function () {
            if (!mediaStream) return;

            const audioTracks = mediaStream.getAudioTracks();
            if (audioTracks.length > 0) {
                const isEnabled = audioTracks[0].enabled;
                audioTracks[0].enabled = !isEnabled;
                this.classList.toggle('muted');
            }
        });

        videoBtn.addEventListener('click', function () {
            if (!mediaStream) return;

            const videoTracks = mediaStream.getVideoTracks();
            if (videoTracks.length > 0) {
                const isEnabled = videoTracks[0].enabled;
                videoTracks[0].enabled = !isEnabled;
                this.classList.toggle('muted');
            }
        });

        endBtn.addEventListener('click', function () {
            handleEndInterview();
        });

        // 在页面加载时添加CSS类
        document.addEventListener('DOMContentLoaded', function () {
            // 检查登录状态
            const token = localStorage.getItem('authToken');
            if (token) {
                document.getElementById('loginPage').style.display = 'none';
                document.getElementById('dashboard').style.display = 'flex';
                loadDashboardData();
            }

            // 绑定结束面试按钮事件
            document.querySelector('.control-btn.end').addEventListener('click', handleEndInterview);

            // 绑定麦克风/摄像头切换按钮事件
            document.querySelector('.fa-microphone').closest('.control-btn').addEventListener('click', function () {
                if (!mediaStream) return;
                const audioTracks = mediaStream.getAudioTracks();
                if (audioTracks.length > 0) {
                    audioTracks[0].enabled = !audioTracks[0].enabled;
                    this.classList.toggle('muted');
                }
            });

            document.querySelector('.fa-video').closest('.control-btn').addEventListener('click', function () {
                if (!mediaStream) return;
                const videoTracks = mediaStream.getVideoTracks();
                if (videoTracks.length > 0) {
                    videoTracks[0].enabled = !videoTracks[0].enabled;
                    this.classList.toggle('muted');
                }
            });
        });
        initMediaDevices();

    </script>
</body>
<video id="userVideo" autoplay muted></video>
<div id="camera-error"></div>
<button onclick="initCamera()">测试摄像头</button>

<script>
    async function initCamera() {
        const videoEl = document.getElementById('userVideo');

        // 清理旧流
        if (window.activeStream) {
            window.activeStream.getTracks().forEach(track => {
                track.stop();
                track.enabled = false;
            });
        }

        try {
            const stream = await navigator.mediaDevices.getUserMedia({
                audio: false,
                video: {
                    width: { ideal: 1280 },
                    height: { ideal: 720 },
                    frameRate: { ideal: 30 }
                }
            });

            window.activeStream = stream;
            videoEl.srcObject = stream;
            videoEl.onloadedmetadata = () => {
                videoEl.play().catch(err => {
                    videoEl.muted = true;
                    videoEl.play();
                });
            };

            console.log('成功绑定摄像头:', stream.id);
        } catch (err) {
            console.error('摄像头初始化失败:', err.name, err.message);
            showPermissionGuide();
        }
    }

    function showPermissionGuide() {
        document.getElementById('camera-error').innerHTML = `
    <div class="alert">
      <h3>摄像头访问被阻止</h3>
      <ol>
        <li>点击地址栏左侧的 <i class="icon-camera"></i> 图标</li>
        <li>选择"始终允许"</li>
        <li><button onclick="window.location.reload()">点击重试</button></li>
      </ol>
      <p>如果仍不工作，请检查系统设置或是否被其他程序占用。</p>
    </div>
  `;
    }
</script>
>

</html>